<template>
	<view class="nav-bar-white">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar left-icon="left" background-color="#FFF" color="#000" @clickLeft="back" title="资产管理" :border="false" fixed="true"></uni-nav-bar>
	</view>
	<view class="wallet-body" :style="{marginTop:statusBarHeight+55+'px'}">
		<text>店铺资金（元）</text>
		<text style="margin-top: 35rpx;font-size: 45rpx;">5590.99</text>
		<view class="flex-row justify-between" style="margin-top: 35rpx;">
			<text style="font-size: 26rpx;">可用资金：1235.98</text>
			<text style="font-size: 26rpx;">冻结资金：1235.98</text>
		</view>
	</view>
	<view class="wallet-record">
		<view class="flex-row justify-between" style="color: #333333;margin-bottom: 20rpx;">
			<view class="flex-row items-center">
				<uni-datetime-picker v-model="range" type="daterange" @change="dateChange">
					选择日期
				</uni-datetime-picker>
				<!-- <text>选择日期</text> -->
				<uni-icons type="down" size="20"></uni-icons>
			</view>
			<view class="flex-row items-center" @click="selectType">
				<text>资金类型</text>
				<uni-icons type="down" size="20"></uni-icons>
			</view>
		</view>
		
		<view v-for="(item,index) in record" :key="index">
			<view class="flex-col record-item">
				<view class="flex-col">
					<text style="color: #666666;font-size: 25rpx;">订单编号：1231231321321231346</text>
					<view class="flex-row items-center" style="margin-top: 15rpx;">
						<view style="width: 80%;" class="flex-row items-center">
							<image src="/static/user/record_1.png" style="width: 90rpx;height: 90rpx;"></image>
							<view class="flex-col" style="margin-left: 15rpx;">
								<text>商品出售</text>
								<text style="color: #999999;font-size: 25rpx;">2025-10-12 14:01</text>
							</view>
						</view>
						<view style="width: 20%;display: flex;justify-content: flex-end">
							<text>+55.56</text>
						</view>
					</view>
				</view>
				<view class="line" style="margin-top: 20rpx;"></view>
			</view>
			
		</view>
	</view>
	
	
	
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
		<view class="flex-col pop-bg" style="padding: 25rpx;">
			<view class="cotainer-pop">
				<text style="justify-self: center;margin-left: 50rpx;">资金类型</text>
				<uni-icons style="justify-self: end;" type="closeempty" size="22" @click="closePop"></uni-icons>
			</view>
		</view>
		
		<uni-data-checkbox class="custom-checkbox" v-model="value" mode="tag" :localdata="typeList" @change="change1"></uni-data-checkbox>
	
	
		<view class="line" style="margin-top: 30rpx;color: #fff;">.</view>
		<view class="flex-row justify-around" style="margin-top: 50rpx;">
			<button class="btn-reset">重置</button>
			<button class="btn-sure">确定</button>
		</view>
	</uni-popup>
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				range:[],
				value:0,
				typeList: [{"value": 0,"text": "全部类型"	},{"value": 1,"text": "出售"},{"value": 2,"text": "退款"},
				{"value": 3,"text": "退款"}],
				record:[{},{},{},{},{},{}]
			};
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight
			}
		},
		methods:{
			dateChange(e){
				this.range = e;
				console.log("-change事件:", e);
			},
			change1(e){
				console.log(e)
			},
			selectType(){
				this.$refs.popup.open()
			},
			closePop(){
				this.$refs.popup.close()
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.wallet-body{
	display: flex;
	flex-direction: column;
	background-color: #3274F9;
	padding: 40rpx;
	margin: 15rpx;
	color: #fff;
	border-radius: 10rpx;
}
.wallet-record{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 20rpx 15rpx 50rpx;
	min-height: 60vh;
}
.pop-bg{
	max-height: 50vh;
	overflow-y: auto;
	padding: 30rpx;
}
.record-item{
	padding: 20rpx 10rpx;
}
.cotainer-pop{
	display: grid;
	grid-template-columns: 1fr auto;
}
.btn-reset{
	border: 1px solid #3274F9;
	padding: 30rpx 70rpx;
	color: #3274F9;
	border-radius: 40rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-sure{
	background-color: #3274F9;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 40rpx;
	padding: 30rpx 70rpx;
	height: 80rpx;
}
.custom-checkbox .uni-data-checklist .checklist-group .checklist-box.is--tag  {
  border-radius: 20px; /* 设置圆角大小 */
  overflow: hidden; /* 防止内容溢出 */
  padding: 20rpx 35rpx;
  margin-top: 30rpx;
}
.custom-checkbox .uni-data-checklist .checklist-group .checklist-box.is--tag{
  margin-right: 15px;	
}
.custom-checkbox .uni-data-checklist .checklist-group{
	padding-left: 50rpx;
}
</style>
